<template>
    <div>
    <slider :announcement="announcement" :sliders="sliders"></slider>
    <booklist heading="最新更新"
              :books="books"
              @select="preview($event)">

    </booklist>
    <booklist heading="每日推荐"
              :books="lastupdatebooks"
              @select="preview($event)">

    </booklist>
     <modal-dialog ref="dialog">
         <div slot="heading"></div>
         <div>
             <div v-if="selected">
                 <h2>{{ selected.title }}</h2>
             </div>
         </div>
     </modal-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
   import slider from './slider.vue'
   import booklist from './booklist.vue'
   import ModalDialog from './dialog.vue'

    export default{
        components:{slider,booklist,ModalDialog},
        methods:{
            xxx(){
                window.alert('hahaha')
            },
            preview (book) {
                this.selected = book
                this.$refs.dialog.open()
            }
        },
        created(){
//            console.log("get created");
            this.$http.get('/data.json').then(res=>{
                this.announcement=res.body.announcement
                this.sliders=res.body.sliders
                this.lastupdatebooks=res.body.lastupdatebooks
                this.books=res.body.books
//                console.log("get sliders!");
            })
        },
        data(){
            return{
                selected:null,
                announcement:'',
                sliders:[],
//                heading:'最新更新',
                books:[],
                lastupdatebooks:[]
            }
        }

    }
</script>
